<!--  -->
<template>
  <div>
    <el-select v-model="selectedData"
               filterable
               clearable
               multiple
               collapse-tags
               default-first-option
               @change="selectChange"
               :placeholder="scriptItem.hint">
      <div @click="actionAllSelect"
           style="margin:4px 20px 10px;height:28px;color:#17B3A3;background-color: rgba(19, 141, 199, 0.1);
           border:1px dashed #17B3A3;border-radius:4px;text-algin:center;line-height:28px;cursor:pointer;">
        <div style="display:flex;justify-content:center;">
          <span style="color:#17B3A3;font-size:14px;">{{ selectDataObj[`${scriptItem.text}ListsOrigin`].length === selectedData.length ? $t('statement.ca'): $t('statement.sa')}}</span>
        </div>
      </div>
      <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                 :key="ii"
                 :value="o[scriptItem.fieldValue]"
                 :label="o[scriptItem.fieldLabel]"></el-option>
    </el-select>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      isAllSelect: false,
      selectedData: []
    }
  },
  mounted () {
    //   setTimeout(() => {
    //   }, 3000)
    // this.setAllSelect()
  },
  methods: {
    // setAllSelect () {
    //   if (this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].length === 0) {
    //     setTimeout(() => {
    //       this.setAllSelect()
    //     }, 1500)
    //   } else {
    //     if (this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].length > 3) {
    //       let temp = {}
    //       temp[this.scriptItem.fieldLabel] = 'All'
    //       temp[this.scriptItem.fieldValue] = 'allSelect'
    //       let allIndex = this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].findIndex(e => e[this.scriptItem.fieldValue] === 'allSelect')
    //       if (allIndex > -1) {
    //         this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].splice(allIndex, 1)
    //       }
    //       this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].unshift(temp)
    //     }
    //   }
    // },
    selectChange (val) {
      // // this.selectedData
      // let hasAllIndex = val.some(e => e === 'allSelect')
      // if (!hasAllIndex) {
      //   this.selectedData = []
      // } else {
      //   this.selectedData = this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].map(e => {
      //     // if (e[this.scriptItem.fieldValue] !== 'allSelect') {
      //     return e[this.scriptItem.fieldValue]
      //     // }
      //   })
      // }
      // this.dataForm[this.scriptItem.text] = this.selectedData.filter(e => e !== 'allSelect')
    },
    actionAllSelect () {
      if (this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].length === this.selectedData.length) {
        this.selectedData = []
        // this.getDataListParams(null)
      } else {
        var arr = []
        this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].forEach(item => {
          arr.push(item[this.scriptItem.fieldValue])
        })
        this.selectedData = arr
        // this.getDataListParams(arr)
      }
    }
  }
}
</script>

<style scoped>
</style>
